<template>
	<view class="uni-content">
		<uni-list :border="true">
			<!-- 显示圆形头像 -->
			<uni-list-item showArrow>
				<!-- 自定义 header -->
				<template v-slot:header>
					<image v-if="!isLogin" class="avatar" :src="avatarUrl" @click="goLogin"></image>
					<button v-else class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
						<image class="avatar" @error="imageError" :src="avatarUrl"></image>
					</button>
				</template>
				<!-- 自定义 body -->
				<template v-slot:body>
					<text class="slot-box slot-text" @click="clickName">
						<text v-if="isLogin">{{userInfo.nickName}}</text>
						<text v-else>未登录</text>
					</text>
				</template>
				<!-- 自定义 footer-->
				<template v-slot:footer>
					<text class="slot-box slot-text-right"
						@click="navigateToFun(1,'/pages/ucenter/userinfo/index')">设置</text>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-list class="center-list">
			<uni-list-item class="item" clickable @click="dialogToggle('解除微信绑定','您确定要解除微信绑定并退出登录么?','bind')"
				title="微信解绑" :rightText="userInfo.openId?'已绑定':'未绑定'" :show-extra-icon="true">
				<template v-slot:header>
					<view class="slot-box">
						<uni-icons custom-prefix="uciconfont" color="#ff6600" size="20" type="icon-weixin"></uni-icons>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="修改密码" link :clickable="true"
				@click="navigateToFun(1,'/pages/ucenter/userinfo/modifyPwd')" :show-extra-icon="true">
				<template v-slot:header>
					<view class="slot-box">
						<uni-icons custom-prefix="uciconfont" color="#ff6600" size="20" type="icon-31mima"></uni-icons>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- <uni-list class="center-list">
			<uni-list-item title="我的订单" link :clickable="true" @click="navigateToFun(1,'/pages/ucenter/order/index')"
				:show-extra-icon="true">
				<template v-slot:header>
					<view class="slot-box">
						<uni-icons custom-prefix="uciconfont" color="#ff6600" size="20" type="icon-shangchengdingdan">
						</uni-icons>
					</view>
				</template>
			</uni-list-item>
		</uni-list> -->
		<uni-list class="center-list">
			<uni-list-item title="我的志愿表" link :clickable="true" @click="navigateToFun(1,'/pages/vlt/form/list')"
				:show-extra-icon="true">
				<template v-slot:header>
					<view class="slot-box">
						<uni-icons custom-prefix="uciconfont" color="#ff6600" size="20" type="icon-shangchengdingdan">
						</uni-icons>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-list class="center-list">
			<uni-list-item title="关注院校" link :clickable="true" @click="navigateToFun(1,'/pages/ucenter/favorite/uni')"
				:show-extra-icon="true">
				<template v-slot:header>
					<view class="slot-box">
						<uni-icons custom-prefix="uciconfont" color="#ff6600" size="20" type="icon-daxue"></uni-icons>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="关注专业" link :clickable="true"
				@click="navigateToFun(1,'/pages/ucenter/favorite/special')" :show-extra-icon="true">
				<template v-slot:header>
					<view class="slot-box">
						<uni-icons custom-prefix="uciconfont" color="#ff6600" size="18" type="icon-zhuanyeshuyukepu"></uni-icons>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="关注职业" link :clickable="true"
				@click="navigateToFun(1,'/pages/ucenter/favorite/occupation')" :show-extra-icon="true">
				<template v-slot:header>
					<view class="slot-box">
						<uni-icons custom-prefix="uciconfont" color="#ff6600" size="15" type="icon-zhiye1">
						</uni-icons>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-list class="center-list">
			<uni-list-item title="用户协议" link :clickable="true"
				@click="navigateToFun(0,'/pages/ucenter/agreement/userAgreement')" :show-extra-icon="true">
				<template v-slot:header>
					<view class="slot-box">
						<uni-icons custom-prefix="uciconfont" color="#ff6600" size="20" type="icon-yonghuxieyi">
						</uni-icons>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="隐私政策" link :clickable="true"
				@click="navigateToFun(0,'/pages/ucenter/agreement/privacyAgreement')" :show-extra-icon="true">
				<template v-slot:header>
					<view class="slot-box">
						<uni-icons custom-prefix="uciconfont" color="#ff6600" size="20" type="icon-anquanyinsi">
						</uni-icons>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<button v-if="isLogin" @click="dialogToggle('退出登录','您确定要退出登录么?','logout')" class="tc-button"
			type="default">退出登录</button>
		<!-- <button v-else type="primary" @click="navigateToFun(0,'/pages/ucenter/login/wxLogin')" class="tc-button">登录</button> -->
	</view>
	<view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" :title="alertTitle" :content="alertContent"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<!-- 未登录提示窗示例 -->
	</view>
</template>

<script>
	import config from './common/js/config.js';
	const {
		defaultAvatar,
		noLoginAvatar,
		imageNotFound,
	} = config
	export default {
		data() {
			return {
				userInfo: {
					nickName: '- -'
				},
				alertTitle: "",
				alertContent: "",
				dialogConfirmFun: "",
				avatarUrl: "",
				isLogin: false
			}
		},
		onShow() {
			this.getLoginInfo()
		},
		created() {},
		onChooseAvatar(e) {
			const filePath = e.detail.avatarUrl
			if (filePath) {
				wx.showLoading({
					title: '上传中'
				})
				const token = uni.getStorageSync('token')
				let header = {}
				if (token) {
					header.Authorization = 'Bearer ' + token
				}
				header['Content-Type'] = 'application/json;charset=UTF-8'
				const postUrl = this.$baseUrl + this.$api.system.user.avatar
				uni.uploadFile({
					url: postUrl, //仅为示例，非真实的接口地址
					filePath: filePath,
					header: header,
					name: 'avatarfile',
					formData: {},
					success: res => {
						// uploadFile上传成功后，根据和后台的约定msgCode判断接口调用状态
						let data = JSON.parse(res.data);
						// 成功：获取到头像
						if (data.code == 200) {
							this.avatarUrl = this.$baseUrl + data.imgUrl
							let userInfoTemp = uni.getStorageSync('gkms-userInfo');
							userInfoTemp.avatar = data.imgUrl
							uni.setStorage({
								key: "gkms-userInfo",
								data: userInfoTemp
							})
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							});
						}
						// 失败报错
						if (data.code == 500) {
							console.log(data.msg)
							uni.showToast({
								title: '上传失败',
								icon: 'error'
							});
						}
					}
				});
			}
		},
		methods: {
			getLoginInfo() {
				if (this.$isLogin()) {
					this.isLogin = true
					let userInfoTemp = uni.getStorageSync('gkms-userInfo');
					this.userInfo = userInfoTemp
					console.log('getLoginInfo',this.userInfo );
					if (userInfoTemp.avatar !== "") {
						this.avatarUrl = this.$baseUrl + userInfoTemp.avatar
					} else {
						this.avatarUrl = defaultAvatar
					}
				} else {
					console.log('else' );
					this.isLogin = false
					this.userInfo = {}
					this.avatarUrl = noLoginAvatar
				}
			},
			logout(showToastTitle) {
				uni.removeStorage({
					key: 'gkms-userInfo',
					success: function(res) {
						console.log('缓存移除userInfo成功');
					}
				});
				uni.removeStorage({
					key: 'token',
					success: function(res) {
						console.log('缓存移除token成功');
						uni.showToast({
							title: showToastTitle,
							icon: 'success'
						});
					}
				});
				this.getLoginInfo()
				uni.showToast({
					title: "退出成功",
					icon: 'success'
				});
				uni.pageScrollTo({
					scrollTop: 1, //距离页面顶部的距离
					duration: 0
				});
			},
			dialogToggle(alertTitle, alertContent, funName) {
				if (funName == "bind" && !this.isLogin) {
					this.goLogin()
				} else {
					this.alertTitle = alertTitle
					this.alertContent = alertContent
					this.dialogConfirmFun = funName
					this.$refs.alertDialog.open()
				}
			},
			goLogin(){
				let loginBackUrl = {
					type: "tabbar",
					fullPath: "/pages/ucenter/index"
				}
				uni.setStorage({
					key: 'LOGIN-BACK-URL',
					data: loginBackUrl
				})
				uni.navigateTo({
					url: "/pages/ucenter/login/wxLogin"
				})
			},
			dialogClose() {
			},
			confirmLogin(){
				
			},
			dialogConfirm() {
				if (this.dialogConfirmFun == 'logout') {
					this.logout("退出成功")
				} else if (this.dialogConfirmFun == 'bind') {
					this.removeBind()
				}
			},
			removeBind() {
				this.$get(this.$api.system.user.removeOpenId).then(res => {
					if (res.code == 200) {
						this.logout("解绑成功");
					}
				})
			},
			navigateToFun(type, url) {
				if (type == 1 && !this.isLogin) {
					this.goLogin()
				} else {
					uni.navigateTo({
						url: url,
						fail(e) {
							console.error(e);
						}
					})
				}
			},
			clickName() {
				//点击昵称时如果已登录则无操作，未登录则给出提示
				if (!this.isLogin) {
					this.goLogin()
				}
			},
			imageError() {
				this.avatarUrl = defaultAvatar
			}
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-wrapper {
		padding: 0;
		width: 45px !important;
		border-radius: 8px;
	}

	.avatar {
		display: block;
		width: 45px;
		height: 45px;
		border-radius: 8px;
	}

	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		margin-right: 20rpx;
	}

	.slot-text {
		flex: 1;
		font-size: 18px;
		font-weight: 600;
		margin-left: 10px;
		color: #ff6600;
	}

	.noLogin-color {
		color: #f99;
	}

	.slot-text-right {
		font-size: 14px;
		margin-right: 0;
		color: #999;
	}

	.uni-content {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
	}

	.center {
		flex: 1;
		flex-direction: column;
		background-color: #f8f8f8;
	}

	.avatar {
		height: 45px;
		width: 45px;
	}

	.tc-button {
		width: 90%;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		background-color: #f89734;
		color: #FFF;
	}

	.center-list {
		margin-top: 20rpx;
		background-color: #f9f9f9;
	}

	.mb20 {
		margin-top: 20rpx;
	}

	/*修改边线粗细示例*/
	/* #ifndef APP-NVUE */
	.center-list ::v-deep .uni-list--border:after {
		-webkit-transform: scaleY(0.2);
		transform: scaleY(0.2);
		margin-left: 80rpx;
	}

	.center-list ::v-deep .uni-list--border-top,
	.center-list ::v-deep .uni-list--border-bottom {
		display: none;
	}

	/* #endif */
</style>
